<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>电子通行证</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .header {
        width: 100%;
        height: 180px;
        background-color: #39619f;
      }
      .logo {
        width: 100%;
        display: block;
        margin: 0 auto;
      }
      .text-box {
        display: flex;
        align-items: center;
        color: #d8e5f1;
        font-size: 16px;
        margin-left: 13px;
        margin-bottom: 5px;
      }
      .label {
        width: 80px;
        letter-spacing: 4px;
        text-align: right;
      }
    </style>
  </head>
  <body>
    <div class="header">
      <div style="height: 1px"></div>
      <img
        class="logo"
        src=""
      />
      <div class="text-box">
        <div class="label" style="text-align: left; letter-spacing: 24px">
          用户
        </div>
        <div class="content">：陈瑀珊(2021332513)</div>
      </div>
      <div class="text-box">
        <div class="label">人员类别</div>
        <div class="content">：学生</div>
      </div>
      <div class="text-box">
        <div class="label">身份证号</div>
        <div class="content">：4201**********0027</div>
      </div>
    </div>
    <div style="height: 10px; background-color: #f2f2f2"></div>
    <div
      style="
        display: flex;
        justify-content: space-between;
        padding: 0 10px;
        margin-top: 10px;
      "
    >
      <div style="font-size: 16px; font-weight: 500; color: #3c3c3c">
        电子通行码
      </div>
      <img
        style="width: 24px"
        src=""
      />
    </div>
    <img
      style="width: 60%; display: block; margin: 20px auto 10px"
      src=""
    />
    <div style="text-align: center; color: #525252">有效通行时间：</div>
    <div style="color: #656565; text-align: center; margin-bottom: 10px">
      2022-10-10 11:13&nbsp;至&nbsp;2022-10-10 17:00
    </div>
    <div
      style="color: #333; font-size: 36px; text-align: center; font-weight: 400"
      id="nowDataTimeSpan"
    ></div>
    <div style="text-align: center; color: #525252; margin-top: 20px">
      可进校一次，可外出一次
    </div>
    <div
      style="
        width: 100%;
        position: absolute;
        top: 660px;
        bottom: 0;
        background-color: #f2f2f2;
      "
    ></div>
    <script>
      function showTime() {
        var today = new Date();
        var ye = today.getFullYear(); //年year
        var mo = today.getMonth() + 1; //月month
        var da = today.getDate(); //日day
        var ho = today.getHours(); //小时hour
        var mi = today.getMinutes(); //分钟minute
        var se = today.getSeconds(); //秒second

        mo = checkTime(mo);
        da = checkTime(da);
        mi = checkTime(mi);
        se = checkTime(se);

        var weekday;
        if (today.getDay() == 0) weekday = "星期日";
        if (today.getDay() == 1) weekday = "星期一";
        if (today.getDay() == 2) weekday = "星期二";
        if (today.getDay() == 3) weekday = "星期三";
        if (today.getDay() == 4) weekday = "星期四";
        if (today.getDay() == 5) weekday = "星期五";
        if (today.getDay() == 6) weekday = "星期六";

        document.getElementById(
          "nowDataTimeSpan"
        ).innerHTML = `${ye}-${mo}-${da} ${ho}:${mi}:<span style="color: #0e0bcd; font-size: 42px">${se}</span>`;
        setTimeout("showTime()", 1000); //每一秒重新加载

        function checkTime(i) {
          if (i < 10) i = "0" + i;
          return i;
        } //时间格式
      }
      showTime();
    </script>
  </body>
</html>
